<template>
<view class="flex-yh">
  <view class="box" style="padding-top:100rpx;">
  	{{title}}
    <button class="btn" @click="goToDetail">跳转详情页</button>
    <button class="btn" type="default"  @click="showPageContainer">pageShow{{pageShow}}</button>		
    拦截器的调试
  </view>
  
  <page-container :show="pageShow" @leave="hidePageShow" position="bottom" duration="300" :round="true">
    <view class="page-cx">这是一个page-container弹窗</view>
  </page-container>

</view>
</template>
  
<script>
	export default {
		data() {
			return {
				title: '我是一个列表',
        pageShow:false,
			}
		},
		onLoad() {
      
      console.log('List页-->onLoad');
			uni.$on('changeByDetail',this.updateOne)
      
      
      uni.addInterceptor('navigateTo',{
        invoke(e){
          console.log('ppx',e)
          return true;
        },
        fail(err){
          console.log(err)
        }
      })

		},		
		onShow() {
			
			console.log('List页-->onShow');

		},			
		methods: {
			goToDetail(){
				uni.navigateTo({url:'/pages/detail/detail'});
			},
			updateOne(res){
				console.log(res.data);
				this.title = res.data;
			},
      showPageContainer(){
        this.pageShow = true;
      },
      hidePageShow(){
        this.pageShow = false;
      } 
		}
	}
</script>
  
<style>
.header{ background: red; flex:1; display:flex; align-items:center;}
.box{ background: #ccc; flex: 1; overflow: auto;}
.btn{ width:300rpx; margin-top:20rpx;}
.page-cx{ background: blue; height: 500rpx; z-index: 22;}
</style>
  